<template>
	<gracePage :isSwitchPage="true" :customHeader="false">
		<!-- 使用自定义底部导航时为主体增加底部 padding 避免遮盖 -->
		<view slot="gBody" class="grace-body" style="padding-bottom:150rpx;">
			<!-- 购物车为空 -->
			<view v-if="shoppingCard.length < 1" style="margin-top:150px;">
				<graceEmpty>
					<view slot="img" class="empty-view">
						<!-- 请根据您的项目要求制作并更换为空图片 -->
						<image class="empty-img" mode="widthFix" src="https://staticimgs.oss-cn-beijing.aliyuncs.com/empty.png"></image>
					</view>
					<text slot="text" class="grace-text-small grace-gray">您的购物车空空如也~</text>
				</graceEmpty>
			</view>
			<!-- 购物车主结构  -->
			<view class="grace-shoppingcard" v-if="shoppingCard.length >= 1">
				<view style="height:25rpx;"></view>
				<view class="grace-shoppingcard-goods" v-for="(goods, indexItem) in shoppingCard" :key="indexItem">
					<view class="grace-shoppingcard-goods-checkbtn">
						<graceCheckBtn :checked="goods.checked" @change="itemChange" :parameter="[indexItem]"></graceCheckBtn>
					</view>
					<image :src="IMG_URL+goods.img" class="grace-shoppingcard-goods-image" mode="widthFix" @click="bindDeatil(goods.id)"></image>
					<view class="grace-shoppingcard-goods-body" @click="bindDeatil(goods.id)">
						<view class="grace-shoppingcard-goods-title">{{goods.name}}</view>
						<view class="grace-shoppingcard-goods-title" style="color: #666666;font-size: 26rpx;">规格：{{goods.sku_name}}</view>
						<view class="grace-space-between">
							<view class="space-price">
								<text class="grace-shoppingcard-goods-vprice">咪粉价￥{{goods.sku_vprice}}</text>
								<text class="grace-shoppingcard-goods-price">￥{{goods.price}}</text>
							</view>
							<view class="grace-shoppingcard-goods-number">
								<graceNumberBox :disabled="true" :index="indexItem" :datas="index+''" inputPadding="5rpx" :value="goods.num"
								 :maxNum="100" :minNum="1" v-on:change="numberChange"></graceNumberBox>
							</view>
						</view>
						<text class="grace-shoppingcard-remove grace-icons icon-remove" @tap.stop="removeGoods(goods.id,indexItem)" :id="'removeIndex_' + index + '_' + indexItem">删除</text>
					</view>
				</view>
			</view>
		</view>
		<view slot="gFooter" class="grace-nowrap grace-flex-vcenter grace-border-t" style="background-color:#FFFFFF;" v-if="shoppingCard.length >= 1">
			<view class="grace-shoppingcard-checkbtn grace-nowrap grace-flex-vcenter">
				<graceCheckBtn :checked="allCheck" @change="itemChangeAll">
					<text class="grace-text">{{selectText}}</text>
				</graceCheckBtn>
			</view>
			<view class="grace-shoppingcard-count grace-nowrap grace-flex-vcenter">
				<view class="all-price">
					<view >合计 :<text style="font-size:32rpx; color:#F00;">￥{{totalprice}}</text></view>
					<view v-if="if_vip == 1" style="color: #FFC102;font-size: 20rpx;margin-top: 6rpx;">节省￥{{sparePrice}}</text></view>
				</view>
			</view>
			<view class="grace-shoppingcard-checkout " style="background: #E55D52;color: #fff;" @tap="checkout">立即结算</view>
		</view>
	</gracePage>
</template>
<script>
	const app = getApp();
	import gracePage from "../../graceUI/components/gracePage.vue";
	import graceEmpty from "../../graceUI/components/graceEmptyNew.vue";
	import graceCheckBtn from '../../graceUI/components/graceCheckBtn.vue';
	import graceNumberBox from '../../graceUI/components/graceNumberBox.vue';
	import {
		nabercatCart,
		delCart
	} from '@/api/index.js'
	import { accMul, accAdd, Subtr } from '../../util/precision.js'
	export default {
		data() {
			return {
				openid: '',
				sparePrice:0,//节省金额
				IMG_URL: app.globalData.IMG_URL, //图片前缀
				totalprice: '', // 总价
				selectText: '全选', // 选择文本
				allCheck: false,
				if_vip: '2', // 是否会员
				shoppingCard: [] // 购物车数据
			}
		},
		onLoad: function() {
			// 初始化时候计算总价，如果使用api 获取购物车项目在 api 请求完成后执行此函数
			this.countTotoal();
		},
		onShow() {
			this.openid = uni.getStorageSync('openid');
			this.nabercatCart();
		},
		methods: {
			// 购物车列表
			nabercatCart: function() {
				nabercatCart({
					openid: this.openid
				}).then(res => {
					console.log(res)
					res.ls.forEach((val, i) => {
						val['checked'] = true
					})
					this.shoppingCard = res.ls
					this.if_vip = res.if_vip
				})
			},

			//计算总计函数
			countTotoal: function() {
				let total = 0;
				let sparePrice = 0; // 节省金额
				this.shoppingCard.forEach((obj, i) => {
					if (obj.checked) {
						if(this.if_vip == 1) { // 会员价
							total = accAdd(accMul(Number(obj.sku_vprice), Number(obj.num)),total)
							sparePrice = accAdd(accMul(Subtr(Number(obj.price),Number(obj.sku_vprice)),Number(obj.num)),sparePrice)
						}else { // 非会员价
							total = accAdd(accMul(Number(obj.price), Number(obj.num)),total)
						}
					}
				})
				this.allCheck = this.shoppingCard.every(function(x) {
					return x.checked == true;
				});
				this.totalprice = total;
				this.sparePrice = sparePrice
			},

			numberChange: function(data) {
				console.log(data)
				this.shoppingCard[data[1]].num = data[0];
				//计算总价
				this.countTotoal();
			},

			// 删除
			removeGoods: function(id, index) {
				uni.showModal({
					title: '确认提醒',
					content: '您确定要移除此商品吗？',
					success: (e) => {
						if (e.confirm) {
							delCart({
								openid: this.openid,
								goods_id: id
							}).then(res => {
								uni.showToast({
									title: '删除成功!',
									duration: 1000
								})
								this.shoppingCard.splice(index, 1);
								//计算总价
								this.countTotoal();
							})

						}
					},
				})
			},

			// 提交订单
			checkout: function() {
				let buyGoodsMsg = {};
				let arrShop = [];
				this.shoppingCard.forEach((obj, i) => {
					console.log(obj)
					if (obj.checked) {
						let objShop = {
							'goods_id': obj.id,
							'goods_price': obj.price,
							'sku_vprice': obj.sku_vprice,
							'goods_num': obj.num,
							'goods_name': obj.name,
							'goods_img': obj.img,
							'sku':{'id':obj.sku_id,'sku_name':obj.sku_name},
							'if_vip': this.if_vip
						}
						arrShop.push(objShop)
					}
				})
				buyGoodsMsg['goods_arr'] = arrShop;
				buyGoodsMsg['price'] = this.totalprice;
				app.globalData.buyGoodsMsg = buyGoodsMsg;
				uni.navigateTo({
					url: '/pageA/pay/pay'
				})
			},

			// 商品选中
			itemChange: function(e) {
				this.shoppingCard[e[1]]['checked'] = e[0];
				this.countTotoal();
			},

			// 全选
			itemChangeAll: function(e) {
				this.selectText = e[0] ? '全选' : '全不选';
				for (let i = 0; i < this.shoppingCard.length; i++) {
					this.shoppingCard[i].checked = e[0];
				}
				this.countTotoal();
			},

			// 调整详情
			bindDeatil: function(id) {
				uni.navigateTo({
					url: `/pageA/goodDetail/goodDetail?id=${id}`
				})
			},
		},
		components: {
			gracePage,
			graceNumberBox,
			graceEmpty,
			graceCheckBtn
		}
	}
</script>
<style>
	page {
		background: #F8F8F8;
	}

	.empty-view {
		width: 280rpx;
		height: 280rpx;
		border-radius: 280rpx;
		background-color: #F6F7F8;
		margin-top: 30rpx;
	}

	.empty-img {
		width: 220rpx;
		height: 200rpx;
		margin: 40rpx;
		border-radius: 200rpx;
	}

	.grace-shoppingcard {
		background: #FFFFFF;
		border-radius: 8rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		margin-top: 20rpx;
	}

	.grace-shopp-name {
		width: 500rpx;
	}

	.grace-shopp-go {
		width: 120rpx;
	}

	.grace-shoppingcard-goods {
		margin: 10rpx 0;
		display: flex;
		flex-wrap: nowrap;
	}

	.grace-shoppingcard-goods-checkbtn {
		width: 60rpx;
		flex-shrink: 0;
	}

	.grace-shoppingcard-goods-image {
		width: 120rpx;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.grace-shoppingcard-goods-body {
		width: 100%;
	}

	.grace-shoppingcard-goods-title {
		line-height: 1.4em;
	}
	
/* 	.space-price{
		display: flex;
		align-items: center;
	} */

	.grace-shoppingcard-goods-price {
		color: #F00;
		font-size: 32rpx;
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		/* margin-right: 6rpx; */
	}
	
	.grace-shoppingcard-goods-vprice {
		color: #FFC102;
		font-size: 24rpx;
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
	}

	.grace-shoppingcard-goods-number {
		padding: 2px 0;
	}

	.grace-shoppingcard-remove {
		display: block;
		text-align: right;
		line-height: 50rpx;
		margin-top: 30rpx;
		color: #CCCCCC;
		font-size: 24rpx;
	}

	.grace-shoppingcard-checkbtn {
		width: 200rpx;
		margin-left: 50rpx;
		flex-shrink: 0;
	}

	.grace-shoppingcard-count {
		width: 600rpx;
	}

	.grace-shoppingcard-checkout {
		width: 280rpx;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 28rpx;
		text-align: center;
		flex-shrink: 0;
	}
</style>
